<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('projectRevenue.dataReport.queryCondition')}}</span></el-col>
      </el-row>
      <el-form :inline="true" :model="listQuery" style="padding: 0 20px">
        <el-row style="padding-bottom: 10px">
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('employeeHourlyWage.wagesDate')}}</div>
              <el-date-picker v-model="listQuery.wagesDate" type="month" value-format="yyyy-MM" :placeholder="$t('placeholder.chooseDate')">
          </el-date-picker>
            </div>
          </el-col>

          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('peopleManager.username')}}</div>
              <el-input v-model="listQuery.employeeNumber" :placeholder="$t('peopleManager.enterUsername')" clearable class="filter-item"></el-input><!--请输入员编-->
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('peopleManager.name')}}</div>
              <el-input v-model="listQuery.employeeName" :placeholder="$t('peopleManager.enterName')" clearable class="filter-item"></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('peopleManager.bu')}}</div>
              <el-select filterable clearable collapse-tags  v-model="listQuery.bu" :placeholder="$t('placeholder.choose')">
                <el-option v-for="(item, index) in buList" :key="index" :label="item.bu" :value="item.bu"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('peopleManager.costCenter')}}</div>
              <yt-select :allList="true" :clearable="true"  v-model="listQuery.costCenter" :listData="this.$store.getters.allDic.costCenter"></yt-select>
            </div>
          </el-col>

          <el-col :span="4" style="margin-top: 32px">
            <div type="primary" class="yt-btn yt-btn-ys" @click="handleFilter">{{$t('button.query')}}</div>
            <div type="primary" class="yt-btn yt-ml8" @click="reset">{{$t('button.reset')}}</div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="yt-data-list" style="padding-bottom: 20px;" v-loading="loading" :element-loading-text="$t('projectRevenue.dataReport.loading')" element-loading-spinner="el-icon-loading">
      <div class="yt-list-title">
        <span>{{$t('projectRevenue.dataReport.listTile')}}</span>
      </div>
      <div class="yt-list-content">
        <div class="list-operation">
          <!--新增-->
          <!-- <el-button type="primary" class="yt-btn-ys" @click="dictDialogVisible = true">{{ $t("button.new") }}</el-button> -->
          <!--保存-->
          <el-button type="primary" class="yt-btn" @click="saveData">{{$t("button.preserve") }}</el-button>
          <!--删除-->
          <!-- <el-button type="primary" class="yt-btn" @click="deleteData">{{$t("button.delete") }}</el-button> -->
        </div>
        <el-table :data="list" :empty-text="$t('placeholder.emptyText')" border class="yt-table" @selection-change="handleSelectionChange" style="width: 100%" max-height="600">
          <!-- <el-table-column type="index" align="center" :label="$t('projectRevenue.dataReport.serialNum')" min-width="60"/> -->

            <el-table-column align="center" label="Sum" width="120" fixed>
              <el-table-column type="selection" align="center" class-name="pd" prop="id" width="60"/>
              <el-table-column type="index" align="center" :label=" $t('project.serialNumber')" class-name="pd" width="60"></el-table-column>
            </el-table-column>

          <el-table-column align="center" :label="$t('employeeHourlyWage.wagesDate')" prop="wagesDate"  min-width="100" :show-overflow-tooltip="true"/>
          <el-table-column align="center" :label="$t('peopleManager.username')" prop="employeeNumber"  min-width="100" :show-overflow-tooltip="true"/>
          <el-table-column align="center" :label="$t('peopleManager.name')" prop="employeeName"  min-width="100" :show-overflow-tooltip="true"/>

          <el-table-column align="center" label="Account" min-width="180" sortable>
            <template slot-scope="scope">
              <el-select filterable clearable @change="((val)=>{setBu(val, scope.row)})" v-model="scope.row.bu" :placeholder="$t('placeholder.choose')">
                <el-option v-for="(item, index) in buList" :key="index" :label="item.bu" :value="item.bu"></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column align="center" :label="$t('peopleManager.personnelList.costCenter')" min-width="150">
            <template slot-scope="scope">
                <template>
                  <dict-select :clearable="false"  v-model="scope.row.costCenter" code="costCenter"></dict-select>
                </template>
            </template>
          </el-table-column>

        </el-table>
        <div v-show="!loading" class="pagination-container">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page.sync="listQuery.page" :page-sizes="[10, 20, 30, 50, 100, 200]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import popoverSelect from '@/components/popover-select/index.vue';
  import { selectBuAndBg } from '@/api/bu/index';
  import { getEmployeeHourlyWage, editEmployeeHourlyWage } from '@/api/employeeHourlyWage';
  import YtTableTitle from '@/components/yt-table-title/index';
  import mixins from '@/mixins/yt-table-title';
  import dictSelect from '@/components/Dict/dictValueSelect';
  export default {
    name: 'projectDataEdit',
    mixins: [mixins],
    components: {
      dictSelect,
      popoverSelect,
      YtTableTitle,
      'dict-select': () => import('@/components/Dict/dictValueSelect'),
      'yt-select': () => import('@/components/Yt-select/index')
    },
    data() {
      return {
        listQuery: {
          page: 1,
          limit: 10,
          employeeName: '', // 员工编号
          employeeNumber: '',
          wagesDate: '', // 日期
          bu: '',
          costCenter: ''
        },
        selectionList: [],
        list: [],
        buList: [],
        total: 0,
        loading: false
      };
    },
    mounted() {
      selectBuAndBg().then(res => {
        this.buList = res.data;
      });
      this.getQuery()
    },
    methods: {
      setBu(val, row) {
        for (let i = 0; i < this.buList.length; i++) {
          if (this.buList[i].bu === val) {
            row.buId = this.buList[i].id;
            row.bu = this.buList[i].bu;
            break;
          }
        }
      },
      saveData() {
        if (this.selectionList.length <= 0) {
          this.$notify({
            title: this.$t('scheduleManager.progressList.fail'),
            message: this.selectionList.length <= 0 ? this.$t('scheduleManager.progressList.updateTipsOne') : this.$t('scheduleManager.progressList.updateTipsTwo'), // '您还未选择' : '您只能选择一条数据进行编辑修改'
            type: 'warning'
          });
          return;
        }

        this.$confirm(this.$t('tips.permanentUpdate'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('tips.determine'),
          cancelButtonText: this.$t('tips.cancel'),
          type: 'warning'
        })
          .then(() => {
            editEmployeeHourlyWage(this.selectionList).then(() => {
              this.$notify({
                title: this.$t('tips.success'),
                message: this.$t('tips.updateSuccess'),
                type: 'success',
                duration: 2000
              });

              this.getData();
            });
          });
      },
      handleSelectionChange(val) {
        //  表格序号选中函数
        this.selectionList = val;
      },
      getQuery() {
        const employeeHourlyWageQuery = window.sessionStorage.getItem('employeeHourlyWageQuery');
        if (employeeHourlyWageQuery) {
          this.listQuery = JSON.parse(employeeHourlyWageQuery);
        }
      },
      editData() {
        if (this.selectionList.length <= 0) {
          this.$notify({
            title: this.$t('scheduleManager.progressList.fail'),
            message: this.selectionList.length <= 0 ? this.$t('scheduleManager.progressList.updateTipsOne') : this.$t('scheduleManager.progressList.updateTipsTwo'), // '您还未选择' : '您只能选择一条数据进行编辑修改'
            type: 'warning'
          });
          return;
        }

        editRecognized(this.selectionList).then(() => {
          this.$notify({
            title: this.$t('tips.success'),
            message: this.$t('tips.updateSuccess'),
            type: 'success',
            duration: 2000
          });

          this.getData();
        });
      },
      getData() {
        this.loading = true
        getEmployeeHourlyWage(this.listQuery).then(res => {
          if (res.status === 200) {
            this.list = res.data.rows;
            this.total = res.data.total;
          } else {
            this.$notify({
              title: this.$t('bu.tips.fail'),
              message: res.message,
              type: 'warning'
            });
          }

          this.loading = false
        })
      },
      handleFilter() {
        this.getData();
      },
      reset() {
        this.listQuery = {
          page: 1,
          limit: 10,
          projectCode: '',
          dataYear: ''
        };
        this.getData();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getData();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getData();
      }
    },
    beforeDestroy() {
      window.sessionStorage.setItem('employeeHourlyWageQuery', JSON.stringify(this.listQuery))
    }
  };
</script>
<style scoped>
  .box{
    /* border: 1px solid #d9d9d9; */
    padding: 0 15px !important;
    height: 36px;
    line-height: 36px;
    text-align: left;
    border-radius: 4px;
    color: #333;
    cursor:text;
    font-size: 12px;
  }
  .box:empty:before{
    content: attr(placeholder);
    color: #c0c4cc;
    font-size: 14px;
  }


  .box1{
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 4px;
    color: #333;
    cursor:text;
    padding:0 15px;
  }
  .box1:empty:before{
    content: attr(placeholder);
    color: #c0c4cc;
    font-size: 12px;
  }

</style>
